<template>
    <div class="reward-container">
        <div style="display: flex;flex-direction: column;">
            <p class="reward-invite-text">Invited history</p>
            <div class="reward-use-card">
                <div class="reward-free-use">
                    <img class="reward-free-use-img" src="../../assets/imgs/images/图层 1.png" alt="">
                    <div style="display: flex;flex-direction: column;">
                        <p style="font-size: 24px;font-weight: 400;color: #1A1A1D;">Premium days</p>
                        <p style="font-size: 16px;font-weight: 500;color: #565A5F;">by referral</p>
                    </div>
                    <p style="font-size: 64px;font-weight: 700;color: #292438;">7</p>
                </div>
                <div class="reward-friends-invite">
                    <img class="reward-free-use-img" src="../../assets/imgs/images/图层 2.png" alt="">
                    <div style="display: flex;flex-direction: column;">
                        <p style="font-size: 24px;font-weight: 400;color: #1A1A1D;">Friends invited</p>
                        <p style="font-size: 16px;font-weight: 500;color: #565A5F;">up to 10 friends</p>
                    </div>
                    <p style="font-size: 64px;font-weight: 700;color: #292438;">1</p>
                </div>
            </div>
        </div>
        <div>
            <div class="reward-refenal-code">
                <div>
                    <p style="font-size: 12px;font-weight: 400;color: #fff;opacity: 0.5;">Referral code</p>
                    <p style="font-size: 16px;font-weight: 400;color: #fff;">{{ referralCode }}</p>
                </div>

                <img @click="copyCode(referralCode)" style="width: 24px;height: 24px;cursor: pointer;"
                    src="../../assets/imgs/icon/document-copy-line.png" alt="">

            </div>
            <div class="reward-refenal-code">
                <div>
                    <p style="font-size: 12px;font-weight: 400;color: #fff;opacity: 0.5;">Referral link</p>
                    <p style="font-size: 16px;font-weight: 400;color: #fff;">{{ referralLink }}</p>
                </div>

                <img @click="copyLink(referralLink)" style="cursor: pointer;width: 24px;height: 24px;"
                    src="../../assets/imgs/icon/document-copy-line.png" alt="">

            </div>
        </div>
        <div>
            <p style="font-size: 20px;font-weight: 700;color: #fff;margin-bottom: 24px;">How it Works?</p>
            <p style="font-size: 16px;font-weight: 700;color: #fff;margin-bottom: 10px;">Step 1</p>
            <p style="font-size: 14px;color: #fff;opacity: 0.8;margin-bottom: 24px;">Invite friends to try Wings VPN by code
                or link.</p>
            <p style="font-size: 16px;font-weight: 700;color: #fff;margin-bottom: 10px;">Step 2</p>
            <p style="font-size: 14px;color: #fff;opacity: 0.8;margin-bottom: 24px;">New friend who signs in via our App or
                PC will be
                considered as a successful referral and will get 3 days of
                Premium.</p>
            <p style="font-size: 16px;font-weight: 700;color: #fff;margin-bottom: 10px;">Step 3</p>
            <p style="font-size: 14px;color: #fff;opacity: 0.8;">With each successful referral, you get 7 days of Premium
                for free.</p>
        </div>
    </div>
</template>

<script setup>
import { info_ext } from '../../apis/user.js'
import { onMounted, ref } from 'vue'
import useClipboard from 'vue-clipboard3'
import { ElMessage } from 'element-plus'

const referralCode = ref('XHJSES')
const referralLink = ref('http://kcdjjcekvnvkk.njkejrrjrk.com…')

const copyCode = async (text) => {
    const { toClipboard } = useClipboard();
    try {
        await toClipboard(text)
        ElMessage('copied!')
    } catch (e) {
        console.log(e);
    }
    // visible1 = false

}
const copyLink = async (text) => {
    const { toClipboard } = useClipboard();
    try {
        await toClipboard(text)
        ElMessage('copied!')
    } catch (e) {
        console.log(e);
    }
}
onMounted(async () => {
    let res = await info_ext()
    console.log(res, 'resRewards--------------');
})
</script>

<style lang="scss" scoped>
.reward-container {
    height: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .reward-refenal-code {
        height: 70px;
        border-radius: 8px;
        background-color: #493D69;
        opacity: 0.8;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 50px;
        margin-bottom: 15px;
    }

    .reward-invite-text {
        font-size: 14px;
        color: #107DFB;
        text-align: right;
    }

    .reward-use-card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;

        .reward-free-use {
            width: 45%;
            height: 120px;
            background: linear-gradient(90deg, #B4D3FA 0%, #437DF7 100%);
            box-shadow: 0px 4px 10px 0px rgba(71, 98, 130, 0.35);
            border-radius: 8px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;

            .reward-free-use-img {
                width: 60px;
                height: 72px;
            }
        }

        .reward-friends-invite {
            width: 45%;
            height: 120px;
            background: linear-gradient(90deg, #A67EEE 3.61%, #4EABFF 96.39%);
            box-shadow: 0px 4px 10px 0px rgba(71, 98, 130, 0.35);
            border-radius: 8px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;
        }
    }
}
</style>